<template>
	<view>
		<!-- <uv-navbar title="货源详情" :autoBack="true" :placeholder="true" bg-color="/static/img/bg_1.png" imgMode="aspectFill"></uv-navbar> -->
		<div class="header">
			<div class="back center" @click="back">
				<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
			</div>
			{{$t('货源详情')}}-仅{{$t('服务')}}
		</div>
		<view>
			<route :allInfo="allInfo"/>
			<!-- <view class="city">
				<view style="width:60%">
					<view class="city_item">
						<image class="ico" src="/static/img/chain.png" mode="widthFix"></image>
						<view class="name">
							{{allInfo.departure.area_info.name || ''}}
						</view>
					</view>
					<view class="citySty">
						{{allInfo.departure.area_info.mergename || ''}}
					</view>
				</view>
				
				<view class="line">
					<view v-if="allInfo.transfer_count !== 0"  class="text">
						{{$t('途经')}}{{allInfo.transfer_count}}
					</view>
					<image class="ico" src="/static/img/ico_line2.png" mode="widthFix"></image>
				</view>
				<view style="width:60%">
					<view class="city_item">
						<image class="ico" src="/static/img/chain.png" mode="widthFix"></image>
						<view class="name">
							{{allInfo.reach.area_info.name || ''}}  
						</view>
					</view>
					<view class="citySty">
						{{allInfo.reach.area_info.mergename || ''}}
					</view>
				</view>
			</view> -->
		</view>
		
	<view class="info_path">
		<view class="title">
			{{$t('业务路径')}}  
		</view>
		
		<view v-show="allInfo.demand_area.length > 0" class="path" v-for="item in allInfo.demand_area">
			<view class="path_item">
				<image v-if="item.demand == '2'" class="ico_p" src="/static/img/ico_p1.png" mode="widthFix"></image>
				<view v-if="item.demand == '2'" class="item">
					<view class="name">
						{{item.area_info.name}}
					</view>
					<view class="text">
						{{item.area_info.mergename}}
					</view>
					<view class="tag">
						{{$t('报关')}}
					</view>
				</view>
			</view>
			<view v-if="item.demand == '4'" class="path_item_ico">
				<image class="ico_p" src="/static/img/ico_p6.png" mode="widthFix"></image>
			</view>
			<view v-if="item.demand == '4'" class="path_item">
				<image class="ico_p" src="/static/img/ico_p2.png" mode="widthFix"></image>
				<view class="item">
					<view class="name">
						{{item.area_info.name}}
					</view>
					<view class="tag">
						{{$t('清关')}}
					</view>
				</view>
			</view>
		</view>
			<view v-show="allInfo.demand_area.length == 0" class="fz28 text-555 text-center">{{$t('暂无')}}</view>
		
		
	</view>
		
		<view class="info_bor">
			<view class="title">
				{{$t('货物信息')}}
			</view>
			<view class="item">
				<view class="name">
					{{$t('订单编号')}}
				</view>
				<view class="info">
					{{allInfo.order_no || ''}}
				</view>
			</view>
			<view class="item">
				<view class="name">
					{{$t('货物名称')}}
				</view>
				<view class="info">
					{{allInfo.goods_info.title || ''}}
				</view>
			</view>
			<view class="item">
				<view class="name">
					{{$t('包装方式')}}
				</view>
				<view class="info">
					{{allInfo.goods_info.package.title || ''}}
				</view>
			</view>
			<view class="item">
				<view class="name">
					{{$t('装卸方式')}}
				</view>
				<view class="info">
					{{allInfo.transport_type == 1 ? $t('整车') : $t('散货')}}
				</view>
			</view>
			<view class="item">
				<view class="name">
					{{$t('货物重量')}}
				</view>
				<view class="info">
					{{allInfo.goods_info.goods_weight || ''}}{{$t('吨')}}
				</view>
			</view>
			<view class="item">
				<view class="name">
					{{$t('货物体积')}}
				</view>
				<view class="info">
					{{allInfo.goods_info.goods_volume || ''}}{{$t('立方米')}}
				</view>
			</view>
			<view class="item">
				<view class="name">
					{{$t('货物密度')}}
				</view>
				<view class="info">
					{{allInfo.goods_info.goods_weight / allInfo.goods_info.goods_volume}}kg/m³
				</view>
			</view>
			<view class="item">
				<view class="name">
					{{$t('特殊尺寸')}}
				</view>
				<view class="info">
					<view v-for="(item, index) in allInfo.goods_info.goods_l.split(',')" class="">
						{{allInfo.goods_info.goods_l.split(',')[index] }}m * {{allInfo.goods_info.goods_w.split(',')[index]}}m * {{allInfo.goods_info.goods_h.split(',')[index]}}m
					</view>
				</view>
			</view>
			<view class="item">
				<view class="name">
					{{$t('货物照片')}}
				</view>
			</view>
			<view class="item_photo">
				<image v-for="item in allInfo.goods_info.attachment" class="ph" :src="getImageUrl(item.path)" mode="aspectFill"></image>
				<!-- <image class="ph" src="/static/img/ph_1.png" mode="aspectFill"></image>
				<image class="ph" src="/static/img/ph_1.png" mode="aspectFill"></image>
				<image class="ph" src="/static/img/ph_1.png" mode="aspectFill"></image> -->
			</view>
			<view class="item">
				<view class="name">
					{{$t('货物清单')}}
				</view>
			</view>
			<view class="item_cargo">
				<view v-for="item in allInfo.attachment_info" class="item_cargo_info">
					<image class="ico" src="/static/img/ico_pdf.png" mode="widthFix"></image>
					<view class="text">
						{{item.path}}
					</view>
				</view>
			</view>
			<view class="item">
				<view class="name">
					{{$t('货物时间')}}
				</view>
				<view class="info">
					
				</view>
			</view>
		</view>
		
		<view class="info_bor">
			<view class="title">
				{{$t('通关服务')}}
			</view>
			<view class="item">
				<view class="name">
					{{$t('报关城市')}}
				</view>
				<view v-if="allInfo.demand_area.length > 0" class="info">
					{{allInfo.demand_area.filter(item => item.demand == '2')[0].area_info.mergename}}
				</view>
			</view>
			<view class="item">
				<view class="name">
					{{$t('清关城市')}}
				</view>
				<view v-if="allInfo.demand_area.length > 0" class="info">
					{{allInfo.demand_area.filter(item => item.demand == '4')[0].area_info.mergename}}
				</view>
			</view>
		</view>
		
		<view class="info_bor">
			<view class="title">
				{{$t('备注信息')}}
			</view>
			<view class="item">
				<view class="name">
					{{$t('订单备注')}}
				</view>
			</view>
			<view class="orderNotes">
				
			</view>
			<view class="item_remark">
				<uv-textarea v-model="remarkValue" :customStyle="{background: '#F6F7FB'}" height="200rpx" border="none" :placeholder="$t('请输入内容')"></uv-textarea>
			</view>
			<view class="item">
				<view class="name">
					{{$t('联系电话')}}
				</view>
				<view class="info">
					{{allInfo.tel}}
				</view>
			</view>
			<view class="item">
				<view class="name">
					{{$t('货主报价')}}
				</view>
				<view class="info">
					{{allInfo.price_unit}}{{allInfo.price}}
				</view>
			</view>
		</view>
		
		<view class="footer_none"></view>
		<view class="footer_btn2">
			<view class="btn">
				{{$t('联系货主')}}
			</view>
		</view>
		
	</view>
</template>

<script>
	import route from "./components/route.vue"
	export default {
		components: {
			route
		},
		data() {
			return {
				remarkValue:'',
				allInfo: {},
				IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
				transportList:[
					{
						key:'0',
						value:this.$t('不限')
					},
					{
						key:'1',
						value:'其他 '
					},
					{
						key:'2',
						value:this.$t('汽运')
					},
					{
						key:'3',
						value:this.$t('空运')
					},
					{
						key:'4',
						value:this.$t('海运')
					},
					{
						key:'5',
						value:this.$t('铁路')
					},
				],
			}
		},
		onLoad(options) {
			this.allInfo = JSON.parse(options.item)
		  },
		methods: {
			back() {
				// uni.navigateBack()
				this.cback()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F7FB;
	}
	.header {
		font-size: 34rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-weight: bold;
		text-align: center;
		position: relative;
		padding-top: var(--status-bar-height);
	}
	.back {
		position: absolute;
		width: 70rpx;
		height: 70rpx;
		top: 15rpx;
	}
.info_path{
	margin: 20rpx 24rpx 0;
	background: #fff;
	border-radius: 20rpx;
	padding:0 24rpx 20rpx;
	.path{
		position: relative;
		&::after{
			content: '';
			position: absolute;
			left:20rpx;
			top:20rpx;
			bottom: 0;
			border-left:1px solid #eee;
		}
		.path_item_ico{
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			align-content: flex-start;
			margin-bottom: 20rpx;
			.ico_p{
				flex-shrink: 0;
				width: 40rpx;
				margin-right: 24rpx;
				position: relative;
				z-index: 9;
			}
		}
		.path_item{
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			align-content: flex-start;
			padding:15rpx 0;
			position: relative;
			
			.item{
				width: 100%;
				.name{
					color: #1D1D1D;
					font-size: 32rpx;
					font-weight: 600;
					line-height: 40rpx;
				}
				.text{
					color: #8C8C8C;
					font-size: 24rpx;
					line-height: 40rpx;
					margin-top: 10rpx;
				}
				.tag{
					width: 128rpx;
					height: 44rpx;
					flex-shrink: 0;
					border-radius: 500rpx;
					background: #D7E8FA;
					text-align: center;
					color: #278AFF;
					font-size: 22rpx;
					line-height: 44rpx;
					margin-top: 15rpx;
				}
			}
			.ico_p{
				flex-shrink: 0;
				width: 40rpx;
				margin-right: 24rpx;
				position: relative;
				z-index: 9;
			}
		}
	}
	.title{
		color: #1D1D1D;
		font-size: 30rpx;
		font-weight: 600;
		line-height: 28rpx;
		height: 96rpx;
		line-height: 96rpx;
		border-bottom: 1rpx solid #F0F0F0;
		margin-bottom: 15rpx;
	}
}
.info_bor{
	margin: 20rpx 24rpx 0;
	background: #fff;
	border-radius: 20rpx;
	padding:0 24rpx 20rpx;
	.orderNotes {
		height: 248px;
		flex-shrink: 0;
		border-radius: 18px;
		background: #F7F7F7;
	}
	.item_remark{
		padding-bottom: 15rpx;
	}
	.item_cargo{
		.item_cargo_info{
			height: 88rpx;
			flex-shrink: 0;
			border-radius: 18rpx;
			background: #F6F7FB;
			display: flex;
			align-items: center;
			padding:0 24rpx;
			margin-bottom: 16rpx;
			.ico{
				width: 32rpx;
				height: 38rpx;
				flex-shrink: 0;
				margin-right: 10rpx;
			}
			.text{
				color: #1D1D1D;
				font-size: 28rpx;
				line-height: 28rpx;
			}
		}
	}
	.item_photo{
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		align-content: flex-start; 
		flex-wrap: wrap;
		gap: 24rpx;
		padding:10rpx 0 30rpx;
		.ph{
			width: 200rpx;
			height: 200rpx;
			flex-shrink: 0;
			border-radius: 20rpx;
		}
	}
	.item{
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding:18rpx 0;
		.name{
			flex-shrink: 0;
			color: #535353;
			font-size: 28rpx;
			line-height: 40rpx;
			margin-right: 30rpx;
		}
		.info{
			color: #1D1D1D;
			font-size: 28rpx;
			font-weight: 600;
			line-height: 40rpx;
		}
	}
	.title{
		color: #1D1D1D;
		font-size: 30rpx;
		font-weight: 600;
		line-height: 28rpx;
		height: 96rpx;
		line-height: 96rpx;
		border-bottom: 1rpx solid #F0F0F0;
		margin-bottom: 15rpx;
	}
}
.city{
	padding:50rpx 60rpx;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	background: #fff;
	border-radius: 0 0 40rpx 40rpx;
	box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.05);
	.line{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: -24rpx;
		.text{
			color: #278AFF;
			font-size: 26rpx;
			font-weight: 500;
			line-height: 28rpx;
		}
		.ico{
			width: 50%;
		}
	}
	.citySty {
		color: #535353;
		font-family: "PingFang SC";
		font-size: 22rpx;
		font-style: normal;
		font-weight: 400;
		margin-top: 16rpx;
	}
	.city_item{
		flex-shrink: 0;
		display: flex;
		align-items: center;
		.ico{
			flex-shrink: 0;
			width: 50rpx;
			flex-shrink: 0;
			margin-right: 10rpx;
		}
		.name{
			font-size: 28rpx;
			font-weight: 600;
			line-height: 40rpx;
		}
	}
}
.footer_none {
	height: 160rpx;
}
.footer_btn2 {
	width: 100%;
	height: 128rpx;
	background: #FFF;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	position: fixed;
	bottom: 0;
	.btn {
		width: 94%;
		height: 94rpx;
		flex-shrink: 0;
		border-radius: 500rpx;
		border: 2rpx solid rgba(3, 189, 130, 0.10);
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		line-height: 94rpx;
		text-align: center;
		color: #FFF;
		font-family: "PingFang SC";
		font-size: 32rpx;
		font-style: normal;
		font-weight: 600;
	}
}
</style>
